<template>
    <el-form ref="formRef" :model="formDate" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="类目名称" prop="name">
            <el-input v-model="formDate.name" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
            <el-input v-model="formDate.img" />
        </el-form-item>
        <el-form-item label="排序" prop="seq">
            <el-input-number v-model="formDate.seq" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input-number v-model="formDate.price" :precision="2" :step="0.1" :min="0" />
        </el-form-item>
        <el-form-item label="父目录">
            <el-tree-select v-model="formDate.categoryId" :data="cateGorydata" :render-after-expand="false"
                :check-strictly="true" />
        </el-form-item>
        <el-form-item label="介绍">
            <el-input v-model="formDate.brief" />
            
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">修改</el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { select ,update} from '@/api/productApi'
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

const formRef = ref()
const formDate = reactive({
    id: 0,
    name: '',
    img: '',
    price: 0,
    brief: '',
    seq: 0,
    categoryId: 0
})
//正则描述  表单验证里面的内容粘贴过来
const rules = reactive({
    name: [
        { required: true, message: '分类名称必填', trigger: 'blur' },
    ]
})
//父目录 
const cateGorydata = ref([
    {
        value: 0,
        label: '一级目录'
    }
])
onMounted(() => {
    console.log(route.query.id);
    formDate.id = Number(route.query.id)
    callProductApi()
})


const callProductApi = () => { 
    select({id: formDate.id}).then(res => { 
        // console.log(res.data);
        let resq=res.data.data[0]
        formDate.name = resq.name
        formDate.img = resq.img
        formDate.seq = resq.seq
        formDate.brief = resq.brief
        formDate.price = resq.price
        formDate.categoryId = resq.categoryId
        console.log(formDate);
    })
}
const formSubmit = () => {
    update({
        id: formDate.id,name: formDate.name, img: formDate.img, seq: formDate.seq, categoryId: formDate.categoryId,
        price: formDate.price, brief: formDate.brief
    }).then(res => {
        console.log(res);
        ElMessage.success("修改成功")
        router.push({ 'name': 'product-list' })
    })
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>